<script setup>
import{reactive,ref} from "vue"
import {useRoute,useRouter} from "vue-router"
import http from "@/utils/http"
import CommentList from "@/components/CommentList.vue"
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore=useNightModeStore();
const route=useRoute();
const router=useRouter();
const comments=reactive({comments:[],commentsnum:null});
http.get(`/story/${route.params.storyid}/short-comments`)
.then(re=>{
    console.log("评论",re)
    comments.comments=re.data.comments
})
http.get(`/story/${route.params.storyid}/extra`).then(re=>{
    comments.commentsnum=re.data;
    console.log("结果",comments)
});
const isShowReply=ref(false);
const reactReply=(event)=>{
    isShowReply.value=true; //显示输入框
    // console.log("父组件",event)                                                        
}
</script>
<template>
   
    <div :class="['commentBar',nightModeStore.isNight?'night':'']" v-if="comments.commentsnum">
        <i @click="router.back()" class="back"></i>{{comments.commentsnum.comments}}条评论</div>
   <div v-if="comments.commentsnum" :class="['short-comment',nightModeStore.isNight?'night':'']">
    {{comments.commentsnum.short_comments}}条短评</div>
  <!-- 评论 --> 
   <CommentList @show-reply="reactReply" :list="comments.comments"></CommentList>
   <div class="reply" :style="{display:isShowReply?'flex':'none'}">
    <img class="avatar" src="../assets/morentouxiang.png"/>
    <input type="text" placeholder="说说你的看法"/>
   </div>

</template>
<style scoped>
.commentBar.night{
    background-color: #555;
    color: white;
}
.short-comment.night{
    background-color: #555;
    color: white;
}
.commentBar{ 
    width: 100%;
    line-height: 50px;
    border-color: #eee;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    
  
}
.commentBar i{
    float: left;
    width: 50px;
    height: 50px;
    background: url(../assets/fanhui.png) no-repeat center center;
    background-size: 20px 20px;
}

    
.short-comment{
    padding: 20px;
    font-size: 13px;
    
}
.reply{
    width: 100%;
    height: 50px;
    background-color: #ddd;
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    display: none;
}
.reply .avatar{
    width: 25px;
    height: 25px;
}
.reply input{
    height: 30px;
    background-color: transparent;
    border: none;
    outline: none; /* 框框消失 */
    margin-left: 5px;

}
</style>